<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中间人模式</title>
    <script src="../../vue2.js"></script>
    <script src="../../axios.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleAxios">axios</button>

    <film-item v-for="data in datalist" :key="data.filmId" :mydata="data" @myevent="handleSynopsis"></film-item>

    <film-synopsis :mysynopsis="synopsisData"></film-synopsis>
</div>
<script>
    Vue.component("filmItem", {
        props: ["mydata"],
        template: `

        <ul style="list-style: none; width: 600px;">
            <li style="border: 1px solid gray;border-radius: 3px;">
                <div class="box-list" style="display: flex;">
                    <img :src="mydata.poster" alt="" style="width: 105px;height: 150px;border-radius: 3px;">
                    <div class="formal" style="padding: 10px 10px;display: flex;flex-direction: column;justify-content: space-between;">
                        <div class="info" style="display: flex;flex-direction: column;justify-content: space-between;">
                            <div class="title">
                                {{ mydata.name }}&nbsp
                                <span>{{ mydata.item.name }}</span>
                            </div>
                            <span>
                                {{ mydata.grade ? '观众评分&nbsp' : '' }}<span
                                    class="grade">{{ mydata.grade ? mydata.grade : ''}}</span>
                            </span>
                            <span>
                                主演：{{ mydata.actorsStr }}
                            </span>
                            <span class="nation-runtime">
                                {{ mydata.nation }}&nbsp
                                |&nbsp
                                {{ mydata.runtime }}分钟
                            </span>
                        </div>
                        <div class="btn">
                            <button @click="handleClick">详情</button>
                        </div>
                    </div>
                </div>
                <div class="part"></div>
            </li>
        </ul>

        `,
        methods: {
            handleClick() {
                this.$emit("myevent", this.mydata.synopsis)
            }
        }
    })

    Vue.component("filmSynopsis",{
        props: ["mysynopsis"],
        template: `

        <div style="width: 500px;height: 300px;position: fixed;top: 50%;right: 300px;transform: translateY(-50%);border: 1px solid skyblue">
            <span>{{ mysynopsis }}</span>
        </div>

        `
    })

    new Vue({
        el: "#box",
        data: {
            datalist: [],
            synopsisData:"",
        },
        methods: {
            handleAxios() {
                axios.get("/VUE/VUE2/json/maizuo.json").then(res => {
                    this.datalist = res.data.data.films
                })
            },
            handleSynopsis(data) {
                this.synopsisData = data;
            }
        }

    })
</script>
</body>
</html>